<template>
  <div class="card">
    <img class="close" src="./img/u1381.png" @click.stop="close">
    <div class="title">{{ data.childNodeName }}--节点详情</div>
    <div class="content">
      <div class="item">
        <div class="label">节点类型：</div>
        <div class="value">{{ d1 }}</div>
      </div>
      <div class="item">
        <div class="label">执行内容：</div>
        <div class="value">{{ data.remark }}</div>
      </div>
      <div v-if="d2" class="item">
        <div class="label">设备：</div>
        <div class="value">{{ d2 }}</div>
      </div>
      <div v-if="d3" class="item">
        <div class="label">仪器：</div>
        <div class="value">{{ d3 }}</div>
      </div>
      <div class="item">
        <div class="label">循环次数：</div>
        <div class="value">{{ data.nodeData }}</div>
      </div>
      <div class="item">
        <div class="label">操作类型：</div>
        <div class="value">{{ data.dictCode }}</div>
      </div>
      <div class="item">
        <div class="label">指令：</div>
        <div class="value">{{ data.comdId }}</div>
      </div>
      <div class="item">
        <div class="label">指令值：</div>
        <div class="value">{{ data.comdData }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    data: {
      type: Object,
      default: () => ({ a: 1 })
    },
    dict1: {
      type: Array,
      default: () => []
    },
    devicelist: {
      type: Array,
      default: () => []
    },
    machinelist: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    d1() {
      return this.dict1.find((i) => i.dictValue == this.data.nodeType)?.dictLabel
    },
    d2() {
      return this.devicelist.find((i) => i.deviceId == this.data.deviceId)?.deviceName
    },
    d3() {
      return this.machinelist.find((i) => i.instrumentId == this.data.instrumentId)?.instrumentName
    }
  },
  mounted() {
    console.log('this', this.data)
  },
  destroyed() {
    console.log('destroyed')
  },
  methods: {
    close() {
      this.$emit('deleteNode')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  position: absolute;
  z-index: 200;
  top: 50%;
  left: 30px;
  padding: 10px 20px;
  transform: translateY(-50%);
  white-space: nowrap;
  border: 1px solid #00c1fe;
  border-radius: 4px;
  background: rgba($color: #1d4656, $alpha: 0.9);
  // 文字不许换行
  .close {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 14px;
    height: 14px;
    cursor: pointer;
  }
  .title {
    margin: 0 10px 10px 0;
    font-size: 14px;
  }
  .content {
    font-size: 12px;
    .item {
      display: flex;
      margin: 5px 0;
      padding: 2px 4px;
      background: rgba($color: #193a4e, $alpha: 0.9);
    }
  }
}
</style>
